<!--  -->
<template>
  <div class="app-column-container">
    <slot name="filter">
      <div
        v-if="treeConfig.filterType !== 0"
        class="top-search border-spe-bottom"
      >
        <a-input-search
          v-if="treeConfig.filterType === 1"
          v-model="searchValue"
          placeholder="请输入关键词"
          @change="handleChange"
        />
        <a-select
          v-else-if="treeConfig.filterType === 2"
          placeholder="请选择"
          show-search
          @change="handleChange"
        >
          <a-select-option
            v-for="(item, index) in treeConfig.filterData"
            :key="index"
            :value="item[treeConfig.labelValue.value]"
          >
            {{ item[treeConfig.labelValue.label] }}
          </a-select-option>
        </a-select>
        <a-auto-complete
          v-else
          :data-source="treeConfig.filterData"
          :placeholder="treeConfig.placeholder || '请输入关键词'"
          @select="onSelect"
          @search="onSearch"
        >
          <template slot="dataSource">
            <a-select-option
              v-for="item in treeConfig.filterData"
              :key="String(item[treeConfig.labelValue.value])"
              :label="item[treeConfig.labelValue.label]"
              :item="item"
            >
              {{ item[treeConfig.labelValue.label] }}
            </a-select-option>
          </template>
        </a-auto-complete>
      </div>
    </slot>

    <div class="main">
      <a-spin :spinning="treeConfig.loading">
        <a-tree
          v-if="treeData.length > 0"
          :loadData="onLoadData"
          :treeData.sync="selfTree"
          :defaultCheckedKeys="treeConfig.defaultCheckedKeys"
          :defaultSelectedKeys="treeConfig.defaultSelectedKeys"
          :defaultExpandedKeys="treeConfig.defaultExpandedKeys"
          :selectedKeys.sync="Keys"
          v-model="checkeds"
          :expandedKeys.sync="expandeds"
          :replaceFields="treeConfig.replaceFields"
          :checkable="treeConfig.checkable"
          :autoExpandParent="treeConfig.autoExpandParent"
          :checkStrictly="treeConfig.checkStrictly"
          :defaultExpandAll="treeConfig.defaultExpandAll"
          :defaultExpandParent="treeConfig.defaultExpandParent"
          :draggable="treeConfig.draggable"
          :disabled="treeConfig.disabled"
          :multiple="treeConfig.multiple"
          @select="nodeClick"
          @check="check"
          @expand="treeConfig.expand"
        >
          <template #title="{ label }">
            <slot name="title" :label="label">
              <span v-if="label.indexOf(searchValue) > -1">
                {{ label.substr(0, label.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{
                  label.substr(label.indexOf(searchValue) + searchValue.length)
                }}
              </span>
              <span v-else>{{ label }}</span>
            </slot>
          </template>
        </a-tree>
      </a-spin>
      <a-empty v-if="treeData.length === 0" />
    </div>
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>
